<template>
	<div class="page">
		<p class="title">基本用法</p>
		<gr-radio v-model="sex" label="1">男</gr-radio>
		<gr-radio v-model="sex" label="0">女</gr-radio>
		<p class="title">按钮组样式</p>
		<gr-radio-group v-model="mode">
			<gr-radio-button label="easy">简单模式</gr-radio-button>
			<gr-radio-button label="hard">困难模式</gr-radio-button>
			<gr-radio-button label="hell">地狱模式</gr-radio-button>
		</gr-radio-group>
		<br>
		<gr-radio-group v-model="mode" size="small">
			<gr-radio-button label="easy">简单模式</gr-radio-button>
			<gr-radio-button label="hard">困难模式</gr-radio-button>
			<gr-radio-button label="hell">地狱模式</gr-radio-button>
		</gr-radio-group>
		<br>
		<gr-radio-group v-model="mode" size="mini">
			<gr-radio-button label="easy">简单模式</gr-radio-button>
			<gr-radio-button label="hard">困难模式</gr-radio-button>
			<gr-radio-button label="hell">地狱模式</gr-radio-button>
		</gr-radio-group>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'hell',
				sex: 1
			}
		},
		mounted() {
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px;
	}
</style>
